<template>
  <el-dialog
  title="实验详情数据"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
  <div class="main_top">
    <p class="part-title" style="margin-top: 5px;">实验描述</p>
    <template>
        <div style="margin-left: 40px;margin-bottom: 20px;">
          <div style="width: 400px;">{{this.ExperimentData.experimentDesc}}</div>
        </div>
      </template>
  <p class="part-title" style="margin-top: 5px;">实验要求</p>
  <template>
    <div style="margin-left: 40px;margin-bottom: 20px;">
      <div style="width: 400px;">{{this.ExperimentData.experimentDemand}}</div>
    </div>
  </template>
  <p class="part-title" style="margin-top: 5px;">实验报告详情</p>
<template>
    <div style="margin-left: 40px;margin-bottom: 20px;">
      <div style="width: 400px;">{{this.ExperimentData.workFile}}</div>
    </div>
  </template>
  <p class="part-title" style="margin-top: 5px;">实验趣味信息</p>
  <el-card class="box-card" style="width: 100%;margin-bottom: 20px;">
    <p v-html='this.ExperimentData.fun'></p>
  </el-card>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="cancel()" v-bind:class="{ 'isShow': !isShow }" style="margin-left: 45%;">关闭窗口</el-button>
  </span>
  </div>
  </el-dialog>
</template>

<script>
  /* eslint-disable */
  export default {
      data () {
        return {
          header: false,
          uuid:'',
          isShow: true,
          pageIndex: 1,
          visible: false,
          ExperimentData:{
            experimentData:[],
            experimentDemand:'',
            fun:'',
            workFile:'',
            experimentDesc:''
          }
        }
      },
      computed: {
        id: {
          get () { return this.$store.state.user.id },
          set (val) { this.$store.commit('user/updateId', val) }
        },
        account: {
          get () { return this.$store.state.user.account },
          set (val) { this.$store.commit('user/updateAccount', val) }
        },
        avatar: {
          get () { return this.$store.state.user.avatar },
          set (val) { this.$store.commit('user/updateAvatar', val) }
        }
      },
      methods: {
        viewHandle (id){
        },
        setCellColor({row,column,rowIndex,columnIndex}){
          if(columnIndex % 2 === 0){
            return 'background-color: #f9f9f9;';
          }
        },
        getExperimentDataList(){
          this.$http({
           url: this.$http.adornUrl('/adminCourse/queryExperimentDetailByUuId'),
           method: 'get',
           params: this.$http.adornParams({
             'uuid': this.uuid
           })
          }).then(({data}) => {
            if (data.success) {
               this.ExperimentData.experimentDesc = data.data.experimentDesc
              this.ExperimentData.experimentDemand = data.data.experimentDemand
              this.ExperimentData.fun = data.data.fun
              this.ExperimentData.workFile = data.data.workFile

            } else {
              this.$message.error(data.message)
            }
          })
        },
        init (uuid) {
          this.visible = true
          this.uuid = uuid || 0
          this.getExperimentDataList()
        },
        cancel(){
          this.visible = false
        }
      }
    }
</script>

<style>
  .part-title {
      margin: 20px 0;
      color: #000;
      padding-left: 1em;
      font-size: 16px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
  .part-title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 1em;
    background-color: #4976e8;
  }
 .text {
    font-size: 14px;
  }
  .item {
    padding: 9px 0;
  }
  .box-card {
    width: 480px;
  }
</style>
